<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HOP - 营销设置</title>
    <meta name="keywords" content="HOP,黑鸥菩,黑鸥菩科技,黑鸥菩科技有限公司,响应式后台">
    <meta name="description" content="HOP黑鸥菩科技有限公司">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="../css/animate.min.css" rel="stylesheet">
    <link href="../css/style.min.css?v=4.1.0" rel="stylesheet">
    <style>
        .form-inline {
            margin-bottom: 20px !important;
        }

        .card {
            width: 100%;
            height: 129px;
            margin-top: 10px;
            /*margin-left: 20px;*/
            border: #E5E6FE 7px dashed;
            border-radius: 20px;
            color: #E5E6FE;
            font-size: 100px;
            line-height: 109px;
            text-align: center;
            font-weight: 800;
            cursor: pointer;
        }

        .selectCard {
            width: 100%;
            height: 129px;
            cursor: pointer;
        }

        .selectCard .coupon {
            left: -10px;
        }

        .inputNumber {
            margin-bottom: 20px;
        }

        .coupon-box {
           /* width: 388px;*/
            cursor: pointer;
            margin: 10px 5px;
            display: inline-block;
            float: left;
            /*border: 1px #e3e3e3 dashed;*/
        }

        .clearIndex {
            cursor: pointer;
        }

        /*coupon*/
        .coupon {
            position: relative;
            /*width: 388px;*/
            height: 129px;
            background: url("../img/cp-bg.png") no-repeat 100% 98%;
            background-size: 96% 84%;
        }

        .bg3 {
            position: absolute;
            z-index: 200;
            width: auto;
            height: 45%;
        }

        .bg2 {
            position: absolute;
            z-index: 100;
            width: 35%;;
            height: 84%;
            top: 16%;
            left: 4%;
        }

        .coupon-name {
            position: absolute;
            color: #ff4f4a;
            z-index: 300;
            transform: rotate(-40deg);
            top: 14%;
            left: 2%;
            font-size: 16px;
        }

        .box1 {
            position: absolute;
            color: white;
            left: 12%;
            top: 30%;
            z-index: 300;
        }

        .span1 {
            font-size: 30px;
        }

        .span2 {
            font-size: 16px;
            margin-top: 10px;
        }

        .box2 {
            position: absolute;
            color: black;
            left: 43%;
            top: 35%;
        }

        .span3 {
            font-size: 24px;
        }

        .span4 {
            font-size: 16px;
            margin-top: 10px;
            color: #a1a1a1;
        }

        .span5 {
            position: absolute;
            color: #ff4f4a;
            right: 5%;
            top: 40%;
            font-size: 16px;
            width: 38px;
        }

        .line {
            position: absolute;
            width: 1px;
            height: 50%;
            right: 17%;
            top: 32%;
            border-left: 1px #e3e3e3 dashed;
        }
    </style>
</head>
<body>
<div class="wrapper wrapper-content" id="app" v-cloak>
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <form id="Form" autocomplete="off">
                <div style="padding: 0">
                    <input type="hidden" name="id">
                    <input type="hidden" name="version" value="0">
                    <div class="col-sm-12 form-group">
                        <div class="col-sm-4">
                            <label class="form-inline">报名成功获赠送积分数（为空则没有）</label>
                            <div>
                                <input type="number" class="form-control inputNumber" name="signUpGiveIntegral"
                                       placeholder="请输入报名成功获赠送积分数（为空则没有）">
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <label class="form-inline">发起分享者获赠送积分数（为空则没有）</label>
                            <div>
                                <input type="number" class="form-control inputNumber" name="initiateShareGiveIntegral"
                                       placeholder="请输入发起分享者获赠送积分数（为空则没有）">
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <label class="form-inline">接收分享者获赠送积分数（为空则没有）</label>
                            <div>
                                <input type="number" class="form-control inputNumber" name="receiveShareGiveIntegral"
                                       placeholder="请输入接收分享者获赠送积分数（为空则没有）">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 form-group">
                        <div class="col-sm-4">
                            <label class="form-inline">
                                报名成功获赠送关联优惠卷（为空则没有）
                                <span class="label label-danger clearIndex" @click="clearIndex(0)">清除</span>
                            </label>
                            <div>
                                <div v-if="couponIndex1 == null" class="card" @click="selectCoupon(0)">&#43;</div>
                                <div v-if="couponIndex1 != null" class="selectCard" @click="selectCoupon(0)">
                                    <div class="coupon">
                                        <img class="bg3" src="../img/cp-bg3.png" v-if="selects[couponIndex1].type == 3 || selects[couponIndex1].type == 4" alt="">
                                        <div class="coupon-name" v-if="selects[couponIndex1].type == 3 || selects[couponIndex1].type == 4">新人券</div>
                                        <img class="bg2" src="../img/cp-bg2.png" alt="">
                                        <div class="box1">
                                            <div class="span1" v-if="selects[couponIndex1].type == 1 || selects[couponIndex1].type == 3">￥{{selects[couponIndex1].couponMoney}}</div>
                                            <div class="span1" v-if="selects[couponIndex1].type == 2 || selects[couponIndex1].type == 4">{{selects[couponIndex1].couponMoney}}&nbsp;折</div>
                                            <div class="span2" v-if="selects[couponIndex1].minUseMoney != null || selects[couponIndex1].minUseMoney != 0 || selects[couponIndex1].minUseMoney != ''">满{{selects[couponIndex1].minUseMoney}}可用</div>
                                        </div>
                                        <div class="box2">
                                            <div class="span3" v-if="selects[couponIndex1].isFullCourt==1">全场通用</div>
                                            <div class="span3" v-if="selects[couponIndex1].isFullCourt!=1">部分使用</div>
                                            <div class="span4">有效期: {{selects[couponIndex1].useTerm}} 天</div>
                                        </div>
                                        <div class="line"></div>
                                        <div class="span5">立即设置</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <label class="form-inline">
                                发起分享者获赠送关联优惠卷（为空则没有）
                                <span class="label label-danger clearIndex" @click="clearIndex(1)">清除</span>
                            </label>
                            <div>
                                <div v-if="couponIndex2 == null" class="card" @click="selectCoupon(1)">&#43;</div>
                                <div v-if="couponIndex2 != null" class="selectCard" @click="selectCoupon(1)">
                                    <div class="coupon">
                                        <img class="bg3" src="../img/cp-bg3.png" v-if="selects[couponIndex2].type == 3 || selects[couponIndex2].type == 4" alt="">
                                        <div class="coupon-name" v-if="selects[couponIndex2].type == 3 || selects[couponIndex2].type == 4">新人券</div>
                                        <img class="bg2" src="../img/cp-bg2.png" alt="">
                                        <div class="box1">
                                            <div class="span1" v-if="selects[couponIndex2].type == 1 || selects[couponIndex2].type == 3">￥{{selects[couponIndex2].couponMoney}}</div>
                                            <div class="span1" v-if="selects[couponIndex2].type == 2 || selects[couponIndex2].type == 4">{{selects[couponIndex2].couponMoney}}&nbsp;折</div>
                                            <div class="span2" v-if="selects[couponIndex2].minUseMoney != null || selects[couponIndex2].minUseMoney != 0 || selects[couponIndex2].minUseMoney != ''">满{{selects[couponIndex2].minUseMoney}}可用</div>
                                        </div>
                                        <div class="box2">
                                            <div class="span3" v-if="selects[couponIndex2].isFullCourt==1">全场通用</div>
                                            <div class="span3" v-if="selects[couponIndex2].isFullCourt!=1">部分使用</div>
                                            <div class="span4">有效期: {{selects[couponIndex2].useTerm}} 天</div>
                                        </div>
                                        <div class="line"></div>
                                        <div class="span5">立即设置</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <label class="form-inline">
                                接收分享者获赠送关联优惠卷（为空则没有）
                                <span class="label label-danger clearIndex" @click="clearIndex(2)">清除</span>
                            </label>
                            <div>
                                <div v-if="couponIndex3 == null" class="card" @click="selectCoupon(2)">&#43;</div>
                                <div v-if="couponIndex3 != null" class="selectCard" @click="selectCoupon(2)">
                                    <div class="coupon">
                                        <img class="bg3" src="../img/cp-bg3.png" v-if="selects[couponIndex3].type == 3 || selects[couponIndex3].type == 4" alt="">
                                        <div class="coupon-name" v-if="selects[couponIndex3].type == 3 || selects[couponIndex3].type == 4">新人券</div>
                                        <img class="bg2" src="../img/cp-bg2.png" alt="">
                                        <div class="box1">
                                            <div class="span1" v-if="selects[couponIndex3].type == 1 || selects[couponIndex3].type == 3">￥{{selects[couponIndex3].couponMoney}}</div>
                                            <div class="span1" v-if="selects[couponIndex3].type == 2 || selects[couponIndex3].type == 4">{{selects[couponIndex3].couponMoney}}&nbsp;折</div>
                                            <div class="span2" v-if="selects[couponIndex3].minUseMoney != null || selects[couponIndex3].minUseMoney != 0 || selects[couponIndex3].minUseMoney != ''">满{{selects[couponIndex3].minUseMoney}}可用</div>
                                        </div>
                                        <div class="box2">
                                            <div class="span3" v-if="selects[couponIndex3].isFullCourt==1">全场通用</div>
                                            <div class="span3" v-if="selects[couponIndex3].isFullCourt!=1">部分使用</div>
                                            <div class="span4">有效期: {{selects[couponIndex3].useTerm}} 天</div>
                                        </div>
                                        <div class="line"></div>
                                        <div class="span5">立即设置</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div style="text-align: center;padding-top: 40px;clear: both">
                    <a href="javascript:parent.layer.closeAll();" class="btn btn-default" style="width: 10%;">关 闭</a>
                    <button type="submit" class="btn btn-primary" style="width: 10%;">保存</button>
                </div>
            </form>
        </div>
    </div>

    <!--选择优惠券-->
    <div class="ibox float-e-margins" id="select" style="display: none;width: 100%">
        <div class="coupon-box" v-for="(item,index) in selects" @click="selectOne(index)" style="width:33.333%">
            <div class="coupon" style="width:100%">
                <img class="bg3" src="../img/cp-bg3.png" v-if="item.type == 3 || item.type == 4" alt="">
                <div class="coupon-name" v-if="item.type == 3 || item.type == 4">新人券</div>
                <img class="bg2" src="../img/cp-bg2.png" alt="">
                <div class="box1">
                    <div class="span1" v-if="item.type == 1 || item.type == 3">￥{{item.couponMoney}}</div>
                    <div class="span1" v-if="item.type == 2 || item.type == 4">{{item.couponMoney}}&nbsp;折</div>
                    <div class="span2" v-if="item.minUseMoney != null || item.minUseMoney != 0 || item.minUseMoney != ''">满{{item.minUseMoney}}可用</div>
                </div>
                <div class="box2">
                    <div class="span3" v-if="item.isFullCourt==1">全场通用</div>
                    <div class="span3" v-if="item.isFullCourt!=1">部分使用</div>
                    <div class="span4">有效期: {{item.useTerm}} 天</div>
                </div>
                <div class="line"></div>
                <div class="span5">立即设置</div>
            </div>
        </div>
    </div>

</div>
<!--js-->
<script src="../js/jquery.min.js?v=2.1.4"></script>
<script src="../js/vue/vue.js"></script>
<script src="../js/vue/vue-resource.js"></script>
<script src="../js/bootstrap.min.js?v=3.3.6"></script>
<script src="../js/plugins/layer/layer.min.js"></script>
<script src="../../common/js/common.js"></script>
<script>
    var companyId = sessionStorageUtils.getJson(storageKey.sessionStorageKey.companyId);
    var schoolId = sessionStorageUtils.getJson(storageKey.sessionStorageKey.schoolId);
    var _layer = layer;
    var _Vue = Vue;
    var _PERM_CODING_HEADER_VALUE = "permCoding";
    var _TOKEN_HEADER_VALUE = "Authorization";
    var _LOGIN_TIMEOUT_CODE = 5000; //系统登录超时code值
    var _LOGIN_PAGE = "";

    var app = new Vue({
        el: '#app',
        data: {
            useScene: '',
            useSceneRelation: '',
            selects: [{}, {}, {}, {}, {}, {}],
            couponIndex: null,
            couponIndex1: null,
            couponIndex2: null,
            couponIndex3: null,
            getUrl: '',
            listUrl: '',
            saveUrl: '',
            saveAuth: '',
            listAuth: '',
            getAuth: '',
        },
        //进入页面初始化方法
        created: function () {
            var that = this;
            that.useScene = aGET.useScene;
            that.useSceneRelation = aGET.useSceneRelation;
            // 得到链接
            var getUrl = sessionStorageUtils.getJson(storageKey.sessionStorageKey.marketing.getUrl);
            if (!empty(getUrl)) {
                that.getUrl = getUrl;
            }
            var listUrl = sessionStorageUtils.getJson(storageKey.sessionStorageKey.marketing.listUrl);
            if (!empty(listUrl)) {
                that.listUrl = listUrl;
            }
            var saveUrl = sessionStorageUtils.getJson(storageKey.sessionStorageKey.marketing.saveUrl);
            if (!empty(saveUrl)) {
                that.saveUrl = saveUrl;
            }

            var saveAuth = sessionStorageUtils.getJson(storageKey.sessionStorageKey.marketing.saveAuth);
            if (!empty(saveAuth)) {
                that.saveAuth = saveAuth;
            }
            var listAuth = sessionStorageUtils.getJson(storageKey.sessionStorageKey.marketing.listAuth);
            if (!empty(listAuth)) {
                that.listAuth = listAuth;
            }
            var getAuth = sessionStorageUtils.getJson(storageKey.sessionStorageKey.marketing.getAuth);
            if (!empty(getAuth)) {
                that.getAuth = getAuth;
            }

            that.getList();
        },
        methods: {
            // 得到优惠券
            getList: function () {
                var that = this;

                Vue.http.headers.common[_TOKEN_HEADER_VALUE] = sessionStorageUtils.getJson(storageKey.sessionStorageKey.token);
                var index = layer.load();
                //设置请求权限
                if (!empty(that.listAuth))
                    Vue.http.headers.common[_PERM_CODING_HEADER_VALUE] = that.listAuth;

                that.$http.get(that.listUrl + "?compayId=" + companyId + "&schoolId=" + schoolId + "&useScene=" + that.useScene + "&useSceneRelation=" + that.useSceneRelation).then(function (response) {
                    // 响应成功回调
                    if (response.data.success) {
                        //更新本地token
                        sessionStorageUtils.setJsonStr(storageKey.sessionStorageKey.token, response.data.token);
                    }
                    Vue.http.headers.common[_PERM_CODING_HEADER_VALUE] = "";
                    layer.close(index);

                    console.log(response.data.list);
                    that.selects = response.data.list;
                    // 查询是否配置
                    that.getConfig();

                }, function (response) {
                    // 响应错误回调
                    //清空heaer中权限值
                    Vue.http.headers.common[_PERM_CODING_HEADER_VALUE] = "";
                    layer.close(index);
                    layer.msg("<span style='color:red'>" + response.body.msg + "</span>", {time: 1500, icon: 5});
                    if (_LOGIN_TIMEOUT_CODE == response.body.code) {
                        sessionStorageUtils.del(storageKey.sessionStorageKey.token);
                        sessionStorageUtils.del(storageKey.sessionStorageKey.permCodes);
                        setTimeout(function () {
                            window.location.href = _LOGIN_PAGE;
                        }, 1200)
                    }
                });
            },
            // 得到当前配置
            getConfig: function() {
                var that = this;

                Vue.http.headers.common[_TOKEN_HEADER_VALUE] = sessionStorageUtils.getJson(storageKey.sessionStorageKey.token);
                var index = layer.load();
                //设置请求权限
                if (!empty(that.getAuth))
                    Vue.http.headers.common[_PERM_CODING_HEADER_VALUE] = that.getAuth;

                that.$http.get(that.getUrl + "?compayId=" + companyId + "&schoolId=" + schoolId + "&useScene=" + that.useScene + "&useSceneRelation=" + that.useSceneRelation).then(function (response) {
                    // 响应成功回调
                    if (response.data.success) {
                        //更新本地token
                        sessionStorageUtils.setJsonStr(storageKey.sessionStorageKey.token, response.data.token);
                    }
                    Vue.http.headers.common[_PERM_CODING_HEADER_VALUE] = "";
                    layer.close(index);

                    console.log(response.data);
                    var list = response.data.data;
                    for (var item in list) {
                        if (!empty(list[item])) {
                            if (item == 'signUpGive') {
                                var indexs = that.getIndexById(list[item]);
                                if (!empty(indexs)) {
                                    that.couponIndex1 = indexs;
                                }
                            } else if (item == 'initiateShareGive') {
                                var indexs = that.getIndexById(list[item]);
                                if (!empty(indexs)) {
                                    that.couponIndex2 = indexs;
                                }
                            } else if (item == 'receiveShareGive') {
                                var indexs = that.getIndexById(list[item]);
                                if (!empty(indexs)) {
                                    that.couponIndex3 = indexs;
                                }
                            }
                            $("#Form input[name='" + item + "']").val(list[item]);
                        }
                    }

                }, function (response) {
                    // 响应错误回调
                    //清空heaer中权限值
                    Vue.http.headers.common[_PERM_CODING_HEADER_VALUE] = "";
                    layer.close(index);
                    layer.msg("<span style='color:red'>" + response.body.msg + "</span>", {time: 1500, icon: 5});
                    if (_LOGIN_TIMEOUT_CODE == response.body.code) {
                        sessionStorageUtils.del(storageKey.sessionStorageKey.token);
                        sessionStorageUtils.del(storageKey.sessionStorageKey.permCodes);
                        setTimeout(function () {
                            window.location.href = _LOGIN_PAGE;
                        }, 1200)
                    }
                });
            },
            // 根据ID得到第几个
            getIndexById: function(id) {
                var that = this;
                var selects = that.selects;
                var index = null;
                for (let i = 0; i < selects.length; i++) {
                    if (!empty(selects[i].id)) {
                        if (selects[i].id == id) {
                            index = i;
                            break;
                        }
                    }
                }
                return index;
            },
            // 选择优惠券
            selectCoupon: function (index) {
                var that = this;
                that.couponIndex = index;
                layer.open({
                    type: 1,
                    area: ['100%', '100%'],
                    content: $('#select')
                });
            },
            // 选中
            selectOne: function (index) {
                var that = this;
                if (that.couponIndex == 0) {
                    that.couponIndex1 = index;
                } else if (that.couponIndex == 1) {
                    that.couponIndex2 = index;
                } else if (that.couponIndex == 2) {
                    that.couponIndex3 = index;
                }
                layer.closeAll();
            },
            // 清除
            clearIndex: function (index) {
                var that = this;
                if (index == 0) {
                    that.couponIndex1 = null;
                } else if (index == 1) {
                    that.couponIndex2 = null;
                } else if (index == 2) {
                    that.couponIndex3 = null;
                }
            },
            // 添加
            add: function () {
                var that = this;
                var param = formToJson($("#Form").serialize());
                param.useScene = that.useScene;
                param.useSceneRelation = that.useSceneRelation;
                if (!empty(that.couponIndex1)) {
                    var signUpGive = that.selects[that.couponIndex1].id;
                    if (signUpGive != undefined) {
                        param.signUpGive = signUpGive;
                    }
                } else {
                    param.signUpGive = 0;
                }
                if (!empty(that.couponIndex2)) {
                    var initiateShareGive = that.selects[that.couponIndex2].id;
                    if (initiateShareGive != undefined) {
                        param.initiateShareGive = initiateShareGive;
                    }
                } else {
                    param.initiateShareGive = 0;
                }
                if (!empty(that.couponIndex3)) {
                    var receiveShareGive = that.selects[that.couponIndex3].id;
                    if (receiveShareGive != undefined) {
                        param.receiveShareGive = receiveShareGive;
                    }
                } else {
                    param.receiveShareGive = 0;
                }
                param['companyId'] = companyId;
                param['schoolId'] = schoolId;
                console.log(param);
                _Vue.http.headers.common[_TOKEN_HEADER_VALUE] = sessionStorageUtils.getJson(storageKey.sessionStorageKey.token);
                var index = _layer.load();
                param = JSON.stringify(param);

                //设置请求权限
                if(!empty(that.saveAuth))
                    _Vue.http.headers.common[_PERM_CODING_HEADER_VALUE] = that.saveAuth;

                that.$http.post(that.saveUrl,param,{emulateJSON: true})
                    .then(function (response) {
                        // 响应成功回调
                        if(response.data.success){
                            //更新本地token
                            sessionStorageUtils.setJsonStr(storageKey.sessionStorageKey.token,response.data.token);
                        }
                        //清空heaer中权限值
                        _Vue.http.headers.common[_PERM_CODING_HEADER_VALUE] = "";
                        _layer.close(index);

                        console.log(response.data);
                        if(response.data.success){
                            layer.msg(response.data.msg, {time: 1500, icon:1});
                            setTimeout(function () {
                                window.parent.location.reload(); //刷新父页面
                                layer.closeAll();
                            }, 1500)
                        }else {
                            layer.msg(response.data.msg, {time: 1500, icon:5});
                        }
                    }, function (response) {
                        // 响应错误回调
                        //清空heaer中权限值
                        _Vue.http.headers.common[_PERM_CODING_HEADER_VALUE] = "";
                        _layer.close(index);
                        _layer.msg("<span style='color:red'>"+response.body.msg+"</span>", {time: 1500, icon:5});
                        if(_LOGIN_TIMEOUT_CODE == response.body.code){
                            sessionStorageUtils.del(storageKey.sessionStorageKey.token);
                            sessionStorageUtils.del(storageKey.sessionStorageKey.permCodes);
                            setTimeout(function () {
                                window.location.href = _LOGIN_PAGE;
                            },1200)
                        }
                    });
            },
        },
    });

    Validator();

    function Validator() {
        $("#Form").submit(function (e) {
            e.preventDefault();
            app.add();
        });
    }
</script>
</body>
</html>
